<template>
  <div id="data-view">
    <dv-full-screen-container enableFullScreen>
      <dv-loading v-if="loading">Loading...</dv-loading>
      <template v-else>
        <div class="main-header">
          <div class="main-header-left">
            <div class="active">日看板</div>
            <div @click="handleTabChange('monthly')">月看板</div>
          </div>
          <div class="main-header-center">
            {{
              lineItem
                ? lineItem.properties.workshopName + lineItem.properties.lineName
                : ""
            }}看板
          </div>
          <div class="main-header-right">
            <Header-Right @change="handleChange" />
          </div>
        </div>

        <div class="main-containers">
          <div class="left-chart-container">
            <div class="item-container">
              <Left-Chart-1
                key="left1"
                :orderItem="orderItem"
                @update-groupItem="handleUpdateGroupItem"
              />
            </div>
            <div class="item-container">
              <Left-Chart-2
                key="left2"
                :orderItem="orderItem"
                :lineItem="lineItem"
                :dateItem="dateItem"
              />
            </div>
          </div>
          <div class="center-chart-container">
            <div class="item-container">
              <Center-Chart-1
                key="center1"
                :lineItem="lineItem"
                :dateItem="dateItem"
                :defaultProduceDate="defaultProduceDate"
                :refreshKey="refreshKey"
                @order-change="handleCurrentOrderChange"
              />
            </div>

            <div class="item-container">
              <Center-Chart-2 key="center2" :orderItem="orderItem" />
            </div>
          </div>

          <div class="right-chart-container">
            <div class="item-container right1">
              <Right-Chart-1
                key="right1"
                :orderItem="orderItem"
                :groupItem="groupItem"
              />
            </div>

            <div class="item-container right2">
              <Right-Chart-2
                key="right2"
                :lineItem="lineItem"
                :groupItem="groupItem"
              />
            </div>

            <div class="item-container right2">
              <Right-Chart-3
                key="right2"
                :lineItem="lineItem"
                :groupItem="groupItem"
              />
            </div>
          </div>
        </div>
      </template>
    </dv-full-screen-container>
  </div>
</template>

<script>
import LeftChart1 from "./LeftChart1";
import LeftChart2 from "./LeftChart2";
import CenterChart1 from "./CenterChart1";
import CenterChart2 from "./CenterChart2";
import RightChart1 from "./RightChart1";
import RightChart2 from "./RightChart2";
import RightChart3 from "./RightChart3";

import HeaderRight from "./HeaderRight";

export default {
  name: "DataView",
  components: {
    LeftChart1,
    LeftChart2,
    CenterChart1,
    CenterChart2,
    RightChart1,
    RightChart2,
    RightChart3,
    HeaderRight,
  },
  data() {
    return {
      loading: true,
      tabActive: "daily",
      //当前产线
      lineItem: null,
      // 当前日期
      dateItem: null,
      // 生产日期
      defaultProduceDate: null,
      // 当前生产工单
      orderItem: null,
      // 当前班组
      groupItem: null,
      // 定时器，每1小时刷新一次
      refreshTimer: null,
      // 刷新标识
      refreshKey: new Date().getTime(),
    };
  },
  mounted() {
    setTimeout(() => {
      this.loading = false;

      this.setRefreshTimer();
    }, 1000);
  },
  methods: {
    // 轮询
    setRefreshTimer() {
      // 每1分钟刷新一次
      if (this.refreshTimer) {
        clearTimeout(this.refreshTimer);
      }
      this.refreshTimer = setTimeout(async () => {
        this.refreshKey = new Date().getTime();

        // 重置定时器
        this.setRefreshTimer();
      }, 60000);
    },
    // 切换产线/日期
    async handleChange(value) {
      // 清除轮询
      if (this.refreshTimer) {
        clearTimeout(this.refreshTimer);
      }

      this.lineItem = value.lineItem;
      this.dateItem = value.dateItem;
      this.defaultProduceDate = value.defaultProduceDate;

      this.refreshKey = new Date().getTime();

      // 重新开始轮询
      this.setRefreshTimer();
    },
    // 切换当前生产工单
    handleCurrentOrderChange(value) {
      this.orderItem = value;
    },
    // 更新班组
    handleUpdateGroupItem(value) {
      this.groupItem = value;
    },
    handleTabChange(value) {
      if (value === "monthly") {
        this.$router.replace("/dashboardMgmt/blowIrriagtionSpinLineMonthly");
      }
    },
  },
  beforeDestroy() {
    // 清除轮询
    if (this.refreshTimer) {
      clearTimeout(this.refreshTimer);
      this.refreshTimer = null;
    }
  },
  activated() {
    this.setRefreshTimer();
  },
  deactivated() {
    // 清除轮询
    if (this.refreshTimer) {
      clearTimeout(this.refreshTimer);
      this.refreshTimer = null;
    }
  },
};
</script>

<style lang="scss" scoped>
#data-view {
  width: 100%;
  height: 100%;
  font-size: 16px;
  background-color: #030409;
  color: #fff;

  #dv-full-screen-container {
    background-image: url("~@/assets/images/dashboard/line/bg.png");
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
  }

  .main-header {
    height: 150px;
    background-image: url("~@/assets/images/dashboard/line/top.png");
    background-size: cover;
    background-position: center;
    position: relative;

    &-left {
      position: absolute;
      left: 48px;
      top: 30px;
      z-index: 1;
      display: flex;
      align-items: center;
      & > div {
        width: 150px;
        height: 53px;
        line-height: 53px;
        font-size: 17px;
        font-weight: 600;
        letter-spacing: 2px;
        text-align: center;
        color: #ffffff;
        background-image: url("~@/assets/images/dashboard/line/tab.png");
        background-size: cover;
        background-position: center;
        cursor: pointer;
        &.active {
          background-image: url("~@/assets/images/dashboard/line/tab-active.png");
        }
      }
    }
    &-center {
      font-size: 40px;
      font-weight: bold;
      text-align: center;
      color: #ffffff;
      margin-top: 14px;
      transform: skewX(-3deg);
    }
    &-right {
      position: absolute;
      right: 48px;
      top: 40px;
      z-index: 1;
    }
  }

  .main-containers {
    width: 100%;
    height: calc(100% - 100px);
    margin-top: -50px;
    padding: 0 40px 40px;
    display: flex;
    position: relative;
    z-index: 10;

    // ::v-deep .border-box-content {
    //   padding: 20px;
    //   box-sizing: border-box;
    //   display: flex;
    // }
  }

  .left-chart-container {
    width: 33.33%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
  }

  .center-chart-container {
    width: 33.33%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
  }

  .right-chart-container {
    width: 33.33%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
  }

  .item-container {
    width: 602px;
    height: 472px;
    background-image: url("~@/assets/images/dashboard/line/box-daily2.png");
    background-size: cover;
    background-position: center;
    &.right1 {
      height: 242px;
      background-image: url("~@/assets/images/dashboard/line/box-daily3.png");
    }
    &.right2 {
      height: 347px;
      background-image: url("~@/assets/images/dashboard/line/box-daily4.png");
    }
  }

  // 公共样式
  ::v-deep {
    .title {
      width: 100%;
      height: 56px;
      text-align: center;
      line-height: 70px;
      font-size: 19px;
      font-weight: 600;
      letter-spacing: 2px;
    }
    .sub-title {
      margin: 14px 0 16px 20px;
      font-size: 15px;
      font-weight: 600;
      color: #00fcff;
      &::before {
        content: "";
        display: inline-block;
        vertical-align: middle;
        width: 6px;
        height: 6px;
        margin-right: 6px;
        border-radius: 50%;
        background-color: #00fcff;
      }
    }

    .no-data {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 14px;
      opacity: 0.6;
    }
  }
}
</style>
